<template>
  <mars-dialog :draggable="false" customClass="base-pannel" left="10" top="10">
    <template v-for="(item, i) in data" :key="i">
      <div v-if="item.widget && !item.children" class="toolbar-item" @click="showWidget(item.widget)">
        <mars-icon :icon="item.icon" width="18"></mars-icon>
        <span class="title">{{ item.name }}</span>
      </div>
      <mars-dropdown-menu v-if="item.children && !item.widget" trigger="hover" placement="bottomRight">
        <div class="toolbar-item">
          <mars-icon :icon="item.icon" width="18"></mars-icon>
          <span class="title">{{ item.name }}</span>
          <mars-icon icon="down" width="18"></mars-icon>
        </div>
        <template #overlay>
          <a-menu @click="clickMenu">
            <a-menu-item v-for="child in item.children" :key="child.widget" :title="child.name">
              <mars-icon :icon="child.icon" width="18"></mars-icon>
              <span>{{ child.name }}</span>
            </a-menu-item>
          </a-menu>
        </template>
      </mars-dropdown-menu>
    </template>
  </mars-dialog>
</template>

<script setup>
/**
 * 导航菜单按钮 （左上角）
 */
import { useWidget } from "@/common/store/widget"

const { activate } = useWidget()

const data = [
  {
    name: "标绘",
    icon: "pencil",
    children: [
      {
        name: "实体标绘",
        icon: "hand-drag",
        widget: "model-manage"
      },
      // { name: "军标标绘", icon: "airplane", widget: "jb-plot" },
      {
        name: "图元标绘",
        icon: "graphic-design",
        widget: "action-plot"
      },
      {
        name: "路径标绘",
        icon: "incoming",
        widget: "line-plot"
      }
    ]
  },
  {
    name: "卫星",
    icon: "globe",
    children: [
      {
        name: "卫星列表",
        icon: "list-two",
        widget: "satellite-manage"
      },
      {
        name: "czml数据",
        icon: "car",
        widget: "czml"
      }
    ]
  },
  {
    name: "UI控件",
    icon: "fill",
    widget: "ui"
  },
  {
    name: "设置",
    icon: "setting-two",
    widget: "setting"
  }
]

const showWidget = (widget) => {
  window?.$dmapLayerManager?.cancelEditing()
  activate(widget)
}

const clickMenu = ({ key }) => {
  showWidget(key)
}
</script>

<style lang="less">
.base-pannel {
  padding: 0 !important;
  background-image: none !important;
  border: 1px solid;
  border: none;
  border-radius: 2px !important;
  background-color: var(--mars-bg-base);
  height: 40px;

  .toolbar-item {
    display: inline-block;
    padding: 6px 12px;
    height: 100%;
    color: var(--mars-text-color);
    font-size: 15px;
    cursor: pointer;

    &:hover {
      background-color: var(--mars-select-bg);
    }
  }

  .mars-icon {
    margin-right: 5px;
    color: var(--mars-text-color);
  }
}
</style>
